import React, { Component } from 'react';
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import { Button, DatePicker, Form, Input, Select, Space, Switch } from 'antd';
import { SearchOutlined } from "@ant-design/icons";
import { useRef } from 'react';
import { apiGetBusinessWorkOrderList, } from '@/request/businessWorkOrder'
import { useState } from 'react';
import { getDateTime2 } from '@/utils/getDate'
import moment from 'moment';
import _ from 'lodash'
import '../style/index.less'

const { RangePicker } = DatePicker

const SearchHeader = ({ getSearchValue }) => {
  const formRef = useRef()
  
  const onFinish = values => {
    if (!_.isEmpty(values.time)) {
      values.startTime = getDateTime2(values.time[0])
      values.endTime = getDateTime2(values.time[1])
    }
    delete (values.time)
    values = {
      ...values,
    }
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    // console.log(values)
    getSearchValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      workOrderCode: '',
      workOrderTitle: '',
      operateName: '',
      launchName: '',
      workOrderType: null,
      workOrderStatus: null,
      time: []
    })
    getSearchValue({})
  }
  return <div className='search-box' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <Form ref={formRef} onFinish={onFinish} layout='inline'>
      <Form.Item name={"workOrderCode"}>
        <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"工单编号"} />
      </Form.Item>
      <Form.Item name={"workOrderTitle"}>
        <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"标题内容"} />
      </Form.Item>
      <Form.Item name={"operateName"}>
        <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"发起人"} />
      </Form.Item>
      <Form.Item name={"launchName"}>
        <Input style={{ width: 120 }} suffix={<SearchOutlined />} placeholder={"受理人"} />
      </Form.Item>
      <Form.Item name={"workOrderType"}>
        <Select placeholder="工单类型"
          style={{ width: 100 }}
          options={[
            {
              value: 'S',
              label: '商品工单'
            },
            {
              value: 'D',
              label: '订单工单'
            },
            {
              value: 'K',
              label: '库存工单'
            }
          ]} />
      </Form.Item>
      <Form.Item name={"workOrderStatus"}>
        <Select placeholder="工单状态"
          style={{ width: 100 }}
          options={[
            {
              value: 'C',
              label: '处理中'
            },
            {
              value: 'J',
              label: '已解决'
            },
            {
              value: 'G',
              label: '已关闭'
            }
          ]} />
      </Form.Item>
      <Form.Item name={"time"} >
        <RangePicker style={{ width: 480 }}
          ranges={{
            Today: [moment(), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
          }}
          showTime
          format="YYYY/MM/DD HH:mm:ss"
        />
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type='primary' htmlType='submit'>搜索</Button>
          <Button onClick={reset}>重置</Button>
        </Space>
      </Form.Item>
    </Form>
  </div>
}

class List extends Component {
  formRef = React.createRef()
  state = {
    columns: [
      {
        title: '工单编号',
        dataIndex: 'workOrderCode',
        key: 'workOrderCode'
      },
      {
        title: '优先级',
        dataIndex: 'priorityLevel',
        key: 'priorityLevel',
        render: (text, record) => {
          let label = ''
          switch (record.priorityLevel) {
            case '1':
              label = '非常紧急'
              break;
            case '2':
              label = '紧急'
              break;
            case '3':
              label = '一般'
              break;
            case '4':
              label = '低'
              break;
            default:
              label = '返回值错误'
              break;
          }
          return label
        }
      },
      {
        title: '发起人',
        dataIndex: 'operateName',
        key: 'operateName'
      },
      {
        title: '手机号',
        dataIndex: 'launchMobile',
        key: 'launchMobile'
      },
      {
        title: '工单类型',
        dataIndex:'workOrderType',
        key:'workOrderType',
        render: (text, record) => {
          let label = ''
          switch (record.workOrderType) {
            case 'S':
              label = '商品工单'
              break;
            case 'D':
              label = '订单工单'
              break;
            case 'K':
              label = '库存工单'
              break;
            default:
              label = '返回值错误'
              break;
          }
          return label
        }
      },
      {
        title: '工单状态',
        dataIndex: 'workOrderStatus',
        key: 'workOrderStatus',
        render: (text,record) => {
          let label = ''
          switch (record.workOrderStatus) {
            case 'C':
              label = '处理中'
              break;
            case 'J':
              label = '已解决'
              break;
            case 'G':
              label = '已关闭'
              break;
            default:
              label = '返回值错误'
              break;
          }
          return label
        }

      },
      {
        title: '发起时间',
        dataIndex: 'launchTime',
        key: 'launchTime',
      },
      {
        title: '处理时间',
        dataIndex: 'disposeTime',
        key: 'disposeTime'
      },
      {
        title: '关闭时间',
        dataIndex: 'closeTime',
        key: 'closeTime',
      },
      {
        title: '工单标题',
        dataIndex: 'workOrderTitle',
        key: 'workOrderTitle',
        render: (text, record) => {
          return (record.workOrderTitle.length <= '15'? record.workOrderTitle : record.workOrderTitle.slice(0,15)+'...')
        }
      },
      {
        title: '工单内容',
        dataIndex: 'workOrderContent',
        key: 'workOrderContent',
        render: (text, record) => {
          return (record.workOrderContent.length <= '30'? record.workOrderContent : record.workOrderContent.slice(0,30)+'...')
        }
      },
      {
        title: '操作人',
        dataIndex: 'launchName',
        key: 'launchName',
      },
      {
        title: '操作',
        fixed: 'right',
        render: (text, record) => {
          return <Space>
            <TheButton onClick={() => this.props.history.push(`/tickets/details/${record.workOrderId}`)}>工单详情</TheButton>
          </Space>
        }
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    searchValue: {},
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    this.setState({ loading: false })
    const { pageData, searchValue } = this.state
    let res = await apiGetBusinessWorkOrderList({ ...pageData, ...searchValue})
    if (res.code === 0 && res.data) {
      // console.log(res.data)
      this.setState({
        dataSource: res.data,
        loading: false,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    } else {
      this.setState({
        loading: false
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }
  getSearchValue = values => {
    this.setState({ searchValue: values }, () => this.getData())
  }
  
  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, loading, } = this.state
    return (
      <div className='p-layout-box'>
        <SearchHeader getSearchValue={this.getSearchValue} />
        <div className='p-layout-content-pagination'>
          <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} loading={loading} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    );
  }
}

export default List;